<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    icon: String,
    text: String,
  },
});
</script>

<template>
  <view class="page-btn">
    <image class="page-btn-icon" v-if="icon" :src="icon" />
    <view class="page-btn-text" v-if="text">{{ text }}</view>

    <slot />
  </view>
</template>

<style lang="scss">
.page-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, 0.1);

  .page-btn-icon {
    width: 44rpx;
    height: 44rpx;
  }

  .page-btn-text {
    font-size: 16rpx;
    color: #666666;
    line-height: 20rpx;
    font-weight: bold;
  }
}
</style>